<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card>
        <el-descriptions
          title="社区详情"
          :column="2"
          :labelStyle="labelStyle"
          border
        >
          <el-descriptions-item label="乡镇"
            >{{ exData.remouldTownName }}
          </el-descriptions-item>
          <el-descriptions-item label="社区"
            >{{ exData.orgName }}
          </el-descriptions-item>
          <el-descriptions-item label="计划开始时间"
            >{{ info.startTime }}
          </el-descriptions-item>
          <el-descriptions-item label="计划结束时间"
            >{{ info.endTime }}
          </el-descriptions-item>
          <el-descriptions-item label="改造牵头人"
            >{{ info.lerderUserName }}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式"
            >{{ info.lerderUserMobile }}
          </el-descriptions-item>
          <el-descriptions-item label="状态"
            >{{ exData.status | keyText("BARRIER_FREE_STATUS") }}
          </el-descriptions-item>
          <el-descriptions-item label="可下发数量">
            {{ exData.taskCount }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="opt">
          <el-button @click="back">
            返回
          </el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <el-descriptions title="无障碍改造人员列表"></el-descriptions>
        <div v-if="records.length !== 0">
          <template v-for="item in records">
            <div :key="item.id" style="margin-bottom:20px">
              <el-descriptions :labelStyle="labelStyle" :column="2" border>
                <el-descriptions-item
                  label="姓名"
                  :contentStyle="{ width: '150px' }"
                >
                  {{ item.name }}
                </el-descriptions-item>
                <el-descriptions-item label="联系方式">
                  {{ item.linkmanPhone }}
                </el-descriptions-item>
                <el-descriptions-item label="改造地址">
                  {{ item.address }}
                </el-descriptions-item>
              </el-descriptions>
              <div class="desAfter">
                <span style="cursor: pointer" @click="view(item.id)">
                  查看详情
                </span>
              </div>
            </div>
          </template>
          <div style="text-align:center">
            <el-pagination
              style="display:inline"
              background
              layout="total, prev, pager, next"
              :page-size="5"
              :total="total"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据"></el-empty>
        </div>
      </el-card>
    </el-col>
    <el-dialog
      title="改造人员详情"
      :visible.sync="personVisible"
      width="40%"
      top="5vh"
      center
      @close="closePerson"
    >
      <el-descriptions :labelStyle="labelStyle" :column="2" border>
        <el-descriptions-item label="姓名" :span="2">
          {{ personInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          {{ personInfo.linkman }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式">
          {{ personInfo.linkmanPhone }}
        </el-descriptions-item>
        <el-descriptions-item label="改造内容" :span="2">
          {{ personInfo.content }}
        </el-descriptions-item>
        <el-descriptions-item label="改造地址" :span="2">
          {{ personInfo.address }}
        </el-descriptions-item>
        <el-descriptions-item label="经度">
          {{ personInfo.lng }}
        </el-descriptions-item>
        <el-descriptions-item label="纬度">
          {{ personInfo.lat }}
        </el-descriptions-item>
        <el-descriptions-item label="状态" :span="2">
          {{ personInfo.status | keyText("BARRIER_FREE_STATUS") }}
        </el-descriptions-item>
        <el-descriptions-item label="附件" :span="2" v-if="personInfo.file">
          <div style="display: inline-block">
            <div
              v-for="(item, index) in JSON.parse(personInfo.file)"
              :key="index"
              style="margin-bottom: 4px"
            >
              <a class="article_title_a" @click="previewDetail(item.id)">
                <i class="el-icon-files mr5" />{{ item.fileName }}
              </a>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          label="验收附件"
          :span="2"
          v-if="personInfo.remouldFile"
        >
          <div style="display: inline-block">
            <div
              v-for="(item, index) in JSON.parse(personInfo.remouldFile)"
              :key="index"
              style="margin-bottom: 4px"
            >
              <a class="article_title_a" @click="previewDetail(item.id)">
                <i class="el-icon-files mr5" />{{ item.fileName }}
              </a>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <template
        v-if="personInfo.status == 'WAIT_CONS' || personInfo.status == 'DESIGN'"
      >
        <el-descriptions
          style="margin-top:20px"
          :title="personInfo.status == 'DESIGN' ? '设计说明' : '验收说明'"
        >
        </el-descriptions>
        <el-input type="textarea" :rows="2" v-model="content"></el-input>
        <el-descriptions
          style="margin-top:20px"
          :title="personInfo.status == 'DESIGN' ? '设计文件' : '验收文件'"
        >
        </el-descriptions>
        <el-upload
          class="upload"
          drag
          :action="url"
          :headers="headers"
          multiple
          :on-success="successHandle"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-exceed="handleExceed"
          :limit="10"
          :file-list="fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </template>
      <span
        v-if="personInfo.status == 'WAIT_CONS' || personInfo.status == 'DESIGN'"
        slot="footer"
        style="text-align:center"
      >
        <el-button type="success" @click="finish(personInfo.status)"
          >验 收 完 成</el-button
        >
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
export default {
  name: "manageDetail_2",
  props: {
    obj: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  activated() {
    // 获取任务信息
    if (this.obj) {
      this.exData = this.obj;
      this.API.getRemouldById({ id: this.obj.remouldId }).then(res => {
        this.info = res.data;
        this.getList();
      });
    }
  },
  data() {
    return {
      fileList: [],
      exData: this.obj,
      labelStyle: {
        width: "120px",
        textAlign: "center"
      },
      total: 1,
      pageIndex: 1,
      info: {},
      content: "",
      personInfo: {},
      records: [],
      personVisible: false,
      // url: window.api.uploadUrl1,
      url: window.api.sysUploadUrl + "?path=barrier",
      headers: {
        userRole: "ADMIN",
        token: sessionStorage.getItem("token")
      },
      filePath: ""
    };
  },
  methods: {
    closePerson() {
      this.content = "";
      this.fileList = [];
      this.filePath = "";
    },
    previewDetail(val) {
      this.openTabPage(
        window.api.preFile +
          "?url=" +
          window.api.secretFilePreview +
          val +
          "?token=" +
          window.sessionStorage.getItem("token")
      );
    },
    finish(status) {
      if (!this.content) {
        return this.$message({
          message: status == "DESIGN" ? "请输入设计说明" : "请输入验收说明",
          type: "warning"
        });
      }
      if (!this.filePath) {
        return this.$message({
          message: status == "DESIGN" ? "请上传设计附件" : "请上传验收附件",
          type: "warning"
        });
      }
      this.$confirm("确认验收?", "提示", {
        type: "success"
      }).then(() => {
        let params = {
          content: this.content,
          filePath: this.filePath,
          id: this.personInfo.id
        };
        if (status == "DESIGN") {
          this.API.designOver(params).then(res => {
            this.$message({
              message: "验收成功!",
              type: "success"
            });
            this.personVisible = false;
            this.closePerson();
          });
        } else {
          this.API.finishPerson(params).then(res => {
            this.$message({
              message: "验收成功!",
              type: "success"
            });
            this.personVisible = false;
            this.closePerson();
          });
        }
      });
    },
    successHandle(res, file, fileList) {
      this.filePath = "";
      let ids = [];
      fileList.map(item => {
        if (item.response && item.response.id) {
          ids.push(item.response);
        }
      });
      this.filePath = JSON.stringify(ids);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      this.filePath = "";
      let ids = [];
      fileList.map(item => {
        if (item.response && item.response.id) {
          ids.push(item.response);
        }
      });
      this.filePath = ids.length ? JSON.stringify(ids) : "";
    },
    // 查看详情
    getList() {
      this.API.getVillagePersonPageList({
        remouldId: this.exData.remouldId,
        villageId: this.exData.id,
        pageIndex: this.pageIndex,
        pageSize: 5
      }).then(res => {
        this.total = res.data.total;
        this.records = res.data.records;
      });
    },
    // 返回
    back() {
      this.$parent.show("manageDetail_1", false);
    },
    // 查看详情
    view(id) {
      this.personVisible = true;
      this.API.getRemouldVillagePersonById({ id }).then(res => {
        this.personInfo = res.data;
      });
    },
    // 分页回调
    handleCurrentChange(val) {
      this.pageIndex = val;
    }
  }
};
</script>

<style scoped>
.upload >>> .el-upload,
.upload >>> .el-upload-dragger {
  width: 100%;
}

.bm-view >>> .ui_city_change {
  margin-top: 32px !important;
}

.opt {
  margin: 20px;
  display: flex;
  justify-content: center;
}

.desAfter {
  border: 1px solid #ebeef5;
  border-top: none;
  padding: 12px 10px;
  font-size: 14px;
  color: #409eff;
  text-align: center;
}

.bm-view {
  width: 100%;
  height: 543px;
}
</style>
